<script setup lang="ts">
import type { BandwidthType } from '@/apis/model/bandwidth.ts'
import type { FormInstance } from '@arco-design/web-vue'
import {
  addBandwidthTypeApi,
  updateBandwidthTypeApi,
} from '@/apis/modules/bandwidthType.ts'
import { useRegions } from '@/composables/useRegions.ts'
import { Message } from '@arco-design/web-vue'
import { omit } from 'lodash-es'

interface IEmit {
  (e: 'success'): void
}

interface IProps {
  record?: BandwidthType
}

const props = defineProps<IProps>()
const emit = defineEmits<IEmit>()

const visible = defineModel<boolean>({ required: true })
const { allRegionOptions } = useRegions()
const { field: name, stringify, parse } = useLangField({ sync: true })

const formRef = ref<FormInstance>()
const formRules = {
  'name.zh-CN': [{ required: true, message: '请输入带宽类型' }],
  'name.en': [{ required: true, message: '请输入英文名' }],
  'region_id': [{ required: true, message: '请选择区域' }],
  'value': [
    { required: true, message: '请输入带宽值' },
    {
      type: 'number',
      min: 1,
      max: 999999,
      message: '带宽取值范围: 1Mbps ~ 999999Mbps',
    },
  ],
}
const formData = reactive({
  id: undefined,
  name,
  region_id: '',
  value: undefined,
})

async function handleSubmit() {
  const err = await formRef.value.validate()
  if (err) {
    return false
  }
  const data = {
    ...omit(formData, ['name']),
    name: stringify(),
  }
  const fn = props.record ? updateBandwidthTypeApi : addBandwidthTypeApi
  await fn(data)
  Message.success(props.record ? '修改成功' : '添加成功')
  emit('success')
  return true
}

function handleOpen() {
  if (!props.record) {
    return
  }
  parse(props.record.name || '')
  formData.id = props.record.id as any
  formData.region_id = props.record.region_id as any
  formData.value = props.record.value
}

function handleClose() {
  formRef.value.resetFields()
}
</script>

<template>
  <a-modal
    v-model:visible="visible"
    width="480px"
    :title="record ? '编辑带宽' : '新建带宽'"
    :on-before-ok="handleSubmit"
    :mask-closable="false"
    @before-open="handleOpen"
    @close="handleClose"
  >
    <a-form
      ref="formRef"
      :model="formData"
      :rules="formRules"
      layout="vertical"
    >
      <a-form-item
        label="带宽类型"
        field="name.zh-CN"
        asterisk-position="end"
        required
        hide-asterisk
      >
        <a-input
          v-model.trim="formData.name['zh-CN']"
          placeholder="请输入带宽类型"
          show-word-limit
          :max-length="40"
        />
      </a-form-item>
      <a-form-item
        label="英文名"
        field="name.en"
        asterisk-position="end"
        required
        hide-asterisk
      >
        <a-input
          v-model.trim="formData.name.en"
          placeholder="请输入英文名"
          show-word-limit
          :max-length="40"
        />
      </a-form-item>
      <a-form-item
        label="所属区域"
        field="region_id"
        asterisk-position="end"
        required
        hide-asterisk
      >
        <a-select
          v-model.trim="formData.region_id"
          placeholder="请选择区域"
          :disabled="!!record"
          :options="allRegionOptions"
        />
      </a-form-item>
      <a-form-item
        label="带宽值"
        field="value"
        asterisk-position="end"
        required
        hide-asterisk
      >
        <a-input-number
          v-model.trim="formData.value"
          placeholder="请输入带宽值"
          hide-button
          :precision="0"
          :min="1"
          :max="999999"
        >
          <template #append>
            Mbps
          </template>
        </a-input-number>
      </a-form-item>
    </a-form>
  </a-modal>
</template>
